import { observer } from "mobx-react";
import { Row, Col } from 'antd';
import { WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

import './index.less';
@observer
export default class FieldProps extends React.Component {
    render() {
        const { store } = this.props;
        const { autoSaveDatasvisible } = store;
        const datas = store.autoSaveDatas.filter(r => {return r.dataJson && r.dataJson.indexOf('＜') == -1});
        const length = datas.length;
        return (
            <div className="edc-field-props" style={autoSaveDatasvisible ? {} : { right: -320 }}>
                <div className={`toggle${autoSaveDatasvisible ? '' : ' toggle-hidden'}`} onClick={store.toggle}></div>
                <ol className="edc-tab-nav">{getLabel('511897','历史版本')}

                </ol>
                {<div className="edc-tab-content" >
                    {/* <Table value={dsTable} style={{ width: '100%' }} options={tableOptions} onChange={changeDataSetTable}></Table> */}
                    {datas.map((field,index) => {
                        const dataJson = JSON.parse(field.dataJson);
                        const wkJson = field.wkJson ? JSON.parse(field.wkJson) : undefined;
                        return (
                            <li onClick = {() => store.changeVersion(dataJson, wkJson)}>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@s4ipa0@${index}`}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@40napw@${index}`} span={8}>
                                        <span dangerouslySetInnerHTML={{ __html: getLabel('511898','版本')+ (length - index) }}></span>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wb2f0w@${index}`} span={16}>
                                    {field.createDate + " " + field.createTime}
                                    </Col>
                                </Row>
                            </li>
                        )
                    })
                    }
                </div>}
            </div>
        )
    }
    clickItem = (key) => {
        const { store } = this.props;
        const { fieldProps } = store;
        fieldProps.selectedTabKey = key;
    }

    toTxt = (str) => {
        if(!str) {
            return str;
        }
        var RexStr = /\＜|\＞|\!|\-\-|\*/g
        str = str.replace(RexStr, function(MatchStr) {
            switch (MatchStr) {
            case "＜":
                return "";
                break;
            case "＞":
                return "";
                break;
            default:
                break;
            }
        })
        return str;
    }
}